﻿
*{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#index_box{
	position: relative;
	width: 100%;
	height: 100%;
	background: url(../images/indexbc_1.png);
	overflow: hidden;
}
.index_header{
	width: 100%;
	height: 9.25%;
	color: #01d4f9;
}
.index_header>div{
	float: right;
	height: 100%;
	position: relative;
}
.h_right .name,.h_right .year{
	margin-top: 4.0vh;
	font-size: 1.0vw;
	margin-right: 1.8vw;
}

.h_right .time{
	margin-top: 4.0vh;
	font-size: 1.0vw;
	margin-right: 1.8vw;
}
.h_right{
	width: 42%;
	display: -webkit-inline-box;
	
}
.h_image{
	width: 6%;
    text-align: left;
	background: url(../images/h1.png);
	background-size: cover;
}
.h_left{
	width: 52%;
    text-align: left;
	background: linear-gradient(45deg, #16229c, #000f28);
}
.h_left .h1{
	font-size: 1.7vw;
	font-weight: 600;
	letter-spacing: 0.15vw;
	box-sizing: border-box;
	padding-top: 0.75vh;
	background: linear-gradient(180deg, #ffffff, #1e9bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.h_left .h2{
	font-size: 0.8vw;
    font-weight: 400;
	letter-spacing: 0.05vw;
    color: #ffffff;
}

.layout {
	display: flex;
    height: 90vh;
    min-height: 500px;
           
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}
        
.column {
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-right: 19px;
        }
        
.left-column {
            flex: 0 0 27%;
            
        }
        
.middle-column {
            flex: 0 0 42%;
            
        }
        
.right-column {
            flex: 0 0 27%;
           
        }
        
.box {
            border-radius: 12px;
            padding: 10px;
            margin: 5px;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            border:2px solid #173191;
            overflow: hidden;
            position: relative;
        }

        
.left-column .box {
            flex: 1;
            background: #0a1362;
        }
        
.middle-column .box {
            flex: 1;
            background: #0a1362;
        }
        
.right-column .box:first-child {
            flex: 1;
            background: #0a1362;
        }
        
.right-column .box:last-child {
            flex: 2;
            background: #0a1362;
        }
.box-header {
    display: flex;
    align-items: center;
    
}  
.responsive-img {
	width: 0.6rem;
    height: 1.1rem;
	margin-right: 0.6rem;
    background-size: cover;
    background-image: url(../images/bq.png);

}
.box-header .h1 {
	font-size: 1.2rem;
    font-weight: 600;
    color: #6dc9f3;
} 
.box-header .h2 {
    font-size: 0.8rem;
    color: #6dc9f3;
    font-weight: 400;
} 
.chart-container {
            height: 100%;
            width: 100%;
           
}
 .box-percentage {
     display: flex;
     justify-content: space-around;
     gap: 20px;
     height: 55%;
     width:96% ;
     margin: 0 auto;
 }
 .chart-percentage {
     width: 30%;
     height: 100%;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     padding: 2px;
     box-sizing: border-box;
 }

 .box-card {
     display: flex;
     gap: 40px;
     flex-wrap: wrap;
     justify-content: center;
     width: 100%;
     height: 25%;
     margin:  auto;
 }
 .card {
     width: 20%;
     height: 100%;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color: white;
     font-weight: bold;
     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     transition: transform 0.3s ease;
 }
 .card-text {
     font-size: 24px;
     margin-bottom: 8px;
     text-align: center;
 }
 .card-value {
     font-size: 22px;
     font-weight: bold;
     text-align: center;
 }

 .legend {
     display: flex;
     justify-content: right;
     gap: 20px;
     margin-top: 20px;
     flex-wrap: wrap;
     position: absolute;
     top: 20%;
     width: 90%;
     z-index: 10;
 }

 .legend-item {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 14px;
     font-weight: bold;


     border-radius: 30px;


 }

 .legend-color {
     width: 14px;
     height: 14px;

     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 }

 .legend-color.blue {
     background: rgba(74, 144, 226, 0.8);
 }

 .legend-color.blue2 {
     background: rgba(125, 222, 255, 0.8);
 }






